import layui from 'layui';
import Loading from '../loading/loading';
import Crud from '../crud/crud';
import Clicked from '../click';
import {
    getJson
} from '../data';
import {
    columnsFormat
} from '../columns/columns';
import {
    toolbar
} from '../toolbar/toolbar';

import './etable.css'
import etable from './etable.art';
import Table from '../table/table';
import Footer from '../footer/footer';



class Etable {
    constructor(data) {
        const $ = data.laymodule.jq;
        this.tableConfig = $.extend(true, {}, {
            pageSize: 10, // 每页显示的记录数
            pagination: true, // 启动分页
            primary: 'id', // 数据表格主键(唯一标识)
            formatData(data) {
                // you  
                return data; // 改变数据结构
            },
            toolbar: {
                create: {
                    show: true,
                    title: '新增',
                    icon: '&#xe654;',
                    click: function(select) {
                        console.log(select)
                    }
                },
                update: {
                    show: true,
                    title: '修改',
                    icon: '&#xe642;',
                    click: function(select) {
                        console.log(select)
                    }
                },
                delete: {
                    show: true,
                    title: '删除',
                    icon: '&#xe640;',
                    click: function(select) {
                        console.log(select)
                    }
                }
            },
        }, data);
        console.log(this.tableConfig)
        this.init();
    }

    getData(data, next) {
        getJson(this, data, next);
    }

    columnsFormat(data) {
        return columnsFormat(this, data);
    }

    toolbar(data) {
        toolbar(this, data);
    }

    init() {
        // console.log(this.tableConfig);
        const _this = this;
        const selector = this.tableConfig.selector;
        const tableConfig = this.tableConfig;
        const url = this.tableConfig.url;
        const $ = this.tableConfig.laymodule.jq;
        const layer = this.tableConfig.laymodule.layer;
        const form = this.tableConfig.laymodule.form;
        const laypage = this.tableConfig.laymodule.laypage;
        const element = this.tableConfig.laymodule.element;

        const pageSize = this.tableConfig.pageSize;
        const primary = this.tableConfig.primary;
        const formatData = this.tableConfig.formatData;
        const columns = this.tableConfig.columns;

        const load = new Loading(this);
        const footer = new Footer(this);
        const table = new Table(this);
        // const crud          = new Crud($, layer);
        // const select        = new Select($, form, element);
        // const columnsFormat = new ColumnsFormat($, columns);
        // const dataSource    = new DataSource($);
        // const toolbar       = new Toolbar(this);

        $(selector).addClass('etable-box').html(etable({})); //初始化结构

        if (!url) {
            console.error('The url is not defined');
        } else {
            getPagelists(1, function(data) {
                tableConfig.initData = data;
                console.log(tableConfig);
                _this.toolbar(data);
            });

            function getPagelists(pageNum, next) {
                console.log(pageNum)
                load.open();
                _this.getData({
                    data: {
                        type: 'get',
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                }, function(data) {
                    console.log(data)
                    data = formatData(data)
                    data = _this.columnsFormat(data)

                    data.data.primary = primary;
                    if (next !== undefined) {
                        next(data);
                    }

                    table.render(data.data)

                    footer.init(data);
                    footer.page(data, function(obj, first) {
                        if (first !== true) {
                            getPagelists(obj.curr)
                        } else {
                            _this.getClicked(data, obj.curr);
                        }
                    });
                    load.close();

                })
            }

        }
    }
}

export default Etable;